<template>
  <Layout>
    <view class="discount-page u-padding-20">
      <!-- 顶部下拉选择 -->
      <view class="select-box u-flex u-row-between u-margin-bottom-20">
        <UniSelect
          v-model="params.cloudIds"
          :options="cloudsOpts"
          placeholder="請選擇"
          :clearable="true"
          :multiple="true"
          style="width: 45%;"
          @change="cloudChange"
        />

        <UniSelect
          v-model="params.productId"
          :options="productOpts"
          placeholder="請選擇产品"
          :clearable="true"
          style="width: 55%;"
          @change="productChange"
        />
      </view>

      <view class="cloud_head" :style="{backgroundColor:activeCloud.cloudColor ||   '#e69e5c'}"> {{ activeCloud.name  }}</view>
      <swiper
        class="swiper_container"
        previous-margin="10rpx"
        next-margin="10rpx"
        :style="{ height: swiperHeight +'px'}"
        circular
        :indicator-dots="false"
        :autoplay="false"
        :current="swiperCurrentIndex"
        @change="onSwiperChange"
      > 
        <swiper-item v-for="(cloud, index) in tabClouds" :key="index">
          <view class="swiper_item uni-bg-red">
            <div class="content" :id="'slide-' + index">
              <u-loadmore v-show="showLoading" :status="'loading'" />

              <view class="question_box"v-if="cloudDetailMap[cloud.id] &&cloudDetailMap[cloud.id].questionsObj.length">
                <view class="question_title">報價問題</view>
                <div class="question_line"></div>
                <view class="question_container">
                    <div class="question_item" v-for="(qItem, qIndex) in cloudDetailMap[cloud.id].questionsObj" :key="qIndex" @click="toggleQuestion(cloud.id, qIndex)">
                      <div class="question_item_head"> {{ qItem.title }} {{qItem.content.length }}個問題</div>
                        <div class="question_item_content" v-show="qItem.isShow">
                          <div class="question_item_desc" :style="{color: opt.isImportant ==1 ? 'red' : ''}" v-for="(opt, K) in qItem.content" :key="K">{{K+1}}. {{ opt.problem }}</div>
                        </div>
                    </div>
                </view>
              </view>

              <!-- 折扣表格 -->
              <view class="discount_table" v-show="!showLoading">
                <view class="discount_row discount_head">
                  <view class="col left">内容</view>
                  <view class="col right">成本折扣</view>
                </view>
                <view class="discount_list" v-if="cloudDetailMap[cloud.id]">
                  <view
                    class="discount_item"
                     v-for="(item, dIndex) in cloudDetailMap[cloud.id].discountList"
                    :key="dIndex"
                  >
                    <div class="discount_item_head" @click="toggleDiscount(cloud.id, dIndex)">
                      <!-- <view class="col left" style="font-size: 12px;display: inline-block;">
                        <view>編號：</view>
                        <text > {{ item.uniqueCode }}</text>
                      </view> -->
                      <view class="col left" style="display: inline-block;">
                        {{ item.content }}
                        <view  style="font-size: 13px; margin-top: 5px;">編號： {{ item.uniqueCode }}</view>
                      </view>
                      <view class="col right" style="background-color: #333; color: #fff;">
                        <span v-if="item.discountType ==0"> {{ $formatDiscount( item.discountDesc ) }} %</span>
                        <span v-if="item.discountType ==1">{{ `${item.discountDesc}/${item.discountUnit}` }}</span>
                        <span v-if="item.discountType !=1 && item.discountType !=0" style="word-break:break-word;">{{ item.discountDesc}}</span>
                        <span></span>
                      </view>
                    </div>
                    <div class="discount_item_body" v-show="item.showDiscount">
                      <nav>
                        <u-row justify="space-between" gutter="10">
                          <u-col span="6">
                            <text>編號： {{ item.uniqueCode }}</text>
                          </u-col>
                          <u-col span="6" style="text-align: right;">
                            <text style="margin-right: 10rpx;">合作狀態： {{ item.coopState ==1 ? '合作中' : '已停止' }}</text>
                          </u-col>
                        </u-row>
                        <u-row justify="space-between" gutter="10">
                          <u-col span="6">
                            <text>上游評分： {{ item.score }}</text>
                          </u-col>
                          <u-col span="6" style="text-align: right;">
                            <text style="margin-right: 10rpx;">負責人： {{ item.leader || '暫無' }}</text>
                          </u-col>
                        </u-row>
                      </nav>
                      <div class="discount_item_body_content">
                        <view class="discount_item_body_content_row">
                          <div class="left_text">帳號轉移評估</div>
                          <div class="right_text">{{ item.accountTransferEvaluation }}</div>
                        </view>
                        <view class="discount_item_body_content_row">
                          <div class="left_text">備註</div>
                          <div class="right_text">{{ item.remark }}</div>
                        </view>
                        <view class="discount_item_body_content_row">
                          <div class="left_text">無折扣項目</div>
                          <div class="right_text">{{ item.noDiscountProject }}</div>
                        </view>
                        <view class="discount_item_body_content_row">
                          <div class="left_text">原廠支援力度</div>
                          <div class="right_text">{{ item.supportLevel }}</div>
                        </view>
                      </div>
                    </div>
                  </view>
                </view>
              </view>
              
            </div>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </Layout>
</template>

<script>
import { getCloudsSelect, getCloudProductsSelect } from '@/api/common.js';
import { getDiscountInfo } from '@/api/accountDiscount.js';
import UniSelect from '@/components/UniSelect/index.vue';

export default {
  components: { UniSelect },
  data() {
    return {
      showLoading: false,
      swiperHeight: 500,
      swiperCurrentIndex: 0,
      cloudsOpts: [],
      productOpts: [],
      tabClouds: [],
      cloudDetailMap: {},
      params: {
        cloudIds: '',
        productId: ''
      },
      activeCloud: '',
    }
  },
  mounted() {
    getCloudsSelect().then((res) => {
      this.cloudsOpts = res.data.map(item => ({
        ...item,
        label: item.name,
        value: item.id
      }));
      this.tabClouds = this.cloudsOpts;
      this.activeCloud = this.tabClouds[0];
      this.loadCloudDetail();
    });
  },
  methods: {
    onSwiperChange(e) {
      const index = e.detail.current;
      this.swiperCurrentIndex = index;
      this.$nextTick(() => this.updateSwiperHeight(this.swiperCurrentIndex));
      this.activeCloud = this.tabClouds[index];
    },

    loadCloudDetail() {
      const payload = {}
      if(this.params.cloudIds.length){
        payload.cloudIds = this.params.cloudIds
        payload.productId = this.params.productId 
      }
      this.showLoading = true
      
      if(!this.params.productId){
        delete payload.productId;
      }
      getDiscountInfo(payload).then(res => {
        const { data } = res
        data.forEach(item=>{
            const discountList = item.discountList ? item.discountList.map(opt => ({
              ...opt,
              showDiscount: false
            })) : []
            const questionsList = Object.entries(item.problems || {}).map(([title, content]) => ({
              title,
              content,
              isShow: false
            }))
            this.$set(this.cloudDetailMap, item.id, {
              discountList,
              questionsObj:questionsList || []
            })
        })
        this.showLoading = false;
        this.$nextTick(() => this.updateSwiperHeight(this.swiperCurrentIndex));
      }).catch(()=>{ this.showLoading = false})
    },

    toggleDiscount(cloudId, index) {
      this.cloudDetailMap[cloudId].discountList[index].showDiscount =
        !this.cloudDetailMap[cloudId].discountList[index].showDiscount;
      this.$nextTick(() => this.updateSwiperHeight(this.swiperCurrentIndex));
    },

    toggleQuestion(cloudId, index) {
      this.cloudDetailMap[cloudId].questionsObj[index].isShow =
        !this.cloudDetailMap[cloudId].questionsObj[index].isShow;
      this.$nextTick(() => this.updateSwiperHeight(this.swiperCurrentIndex));
    },

    updateSwiperHeight(index) {
      const id = `#slide-${index}`;
      this.$nextTick(() => {
        uni.createSelectorQuery()
          .in(this)
          .select(id)
          .boundingClientRect(res => {
            if (res && res.height) {
              this.swiperHeight = Math.max(res.height, 300);
            }
          })
          .exec();
      });
    },

    cloudChange(val) {
      if(val.length){
        this.tabClouds =   this.cloudsOpts.filter(item =>{
         return val.includes(item.id)
        })
        this.swiperCurrentIndex = 0
        this.params.cloudIds = val;
        this.productOpts = []
        this.params.productId = ''
        getCloudProductsSelect({ cloudIds: val }).then(res => {
          this.productOpts = res.data.map(item => ({
            ...item,
            label: item.name,
            value: item.id
          }));
        });
      }else{
        this.tabClouds = this.cloudsOpts
      }
      this.activeCloud = this.tabClouds[0];
      this.loadCloudDetail(this.tabClouds[0].id);
    },

    productChange(val) {
      this.params.productId = val;
      this.loadCloudDetail();
    },
    formatNumber(num){
      return num.toFixed(2) *1
    }
  }
}
</script>

<style lang="scss" scoped>
.discount-page {
  background-color: #fff;
  padding: 20rpx 20rpx;
}

.select-box {
  gap: 20rpx;
  margin-bottom: 50rpx;
  display: flex;
  .uni-select {
    width: 40%;
    /* font-size: 26rpx; */
    padding-right: 10rpx;
    padding: 4rpx 10rpx;
  }
}
.swiper_container {
  height: 400rpx;
  .swiper_item {
    height: 1200rpx;
    padding-right: 20rpx;
    .discount_table {
      border-radius: 10rpx;
      overflow: hidden;
      margin-top: 10rpx;
      .discount_row {
        margin-top: 10rpx;
        display: flex;
        .col {
          padding: 20rpx;
          color: #fff;
          text-align: center;
        }
        .left {
          width: 65%;
        }
        .right {
          flex: 1;
        }
      }
      .discount_head {
        font-size: 28rpx;
        background-color: #333;
        color: #fff;
      }
      .discount_list {
        .discount_item {
          .discount_item_head {
            display: flex;
            margin-top: 20rpx;
            gap: 20rpx;
            .col {
              box-sizing: border-box;
              padding: 40rpx 20rpx;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #000;
              text-align: center;
            }
            .left {
              width: 63%;
              background-color: #f2f2f2;
            }
            .right {
              width: 37%;
              box-sizing: border-box;
              background-color: #e69e5c;
              overflow: hidden;
              white-space: pre-line;
            }
          }
          .discount_item_body {
            padding: 10rpx;
            border: 1rpx solid #d7d7d7;
            border-top: none;
            nav {
              ::v-deep.u-col {
                padding: 20rpx;
                font-size: 28rpx;
              }
            }
            .discount_item_body_content {
              margin-top: 10rpx;
              display: flex;
              flex-direction: column;
              gap: 20rpx;
              .discount_item_body_content_row {
                display: flex;
                display: flex;
                gap: 0 20rpx;
                font-size: 28rpx;
                color: #333333;
                text-align: center;
                div {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  padding: 30rpx 10rpx;
                }
                .left_text {
                  width: 28%;
                  border: 1rpx solid #e3e3e3;
                }
                .right_text {
                  flex: 1;
                  background-color: #f2f2f2;
                }
              }
            }
          }
        }
      }
    }

    .question_box {
      margin-top: 20rpx;
      margin-bottom: 50rpx;
      .question_title {
        font-size: 32rpx;
        text-align: center;
        margin-bottom: 20rpx;
      }
      .question_line {
        height: 1px;
        margin-bottom: 10px;
        background-color: #000;
      }
      .question_container{
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 15rpx;
        .question_item{
          .question_item_head{
            height: 100rpx;
            background-color: #f2f2f2;
            color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .question_item_content{
            padding: 0rpx 20rpx;
            .question_item_desc{
              font-size: 24rpx;
              padding: 24rpx 0;
              border-bottom: 1px solid #ebebeb;
            }
          }
        }
      }
      .question-item {
        display: flex;
        align-items: flex-start;
        .q-index {
          font-weight: bold;
          width: 40rpx;
          color: #333;
        }
        .highlight {
          color: red;
        }
        .q-text {
          flex: 1;
          color: #555;
        }
      }
    }
  }
}
.cloud_head {
  display: flex;
  height: 80rpx;
  justify-content: center;
  align-items: center;
  font-size: 40rpx;
  color: #fff;
  background-color: #e69e5c;
  margin-bottom: 20rpx;
  position: sticky;
  top: 60px;
  z-index: 9;
}
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.fade-slide-enter, .fade-slide-leave-to {
  opacity: 0;
  transform: translateY(-10rpx);
}
</style>
